main {
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: start;
}

aside {
    padding: 10px;
    background-color: var(--primary-color);
}

.aside_title {
    color: #ffffff;
    border-bottom: 1px solid #f2f2f2;
    padding: 10px;
    font-weight: bolder;
}

.aside_item {
    padding: 10px;
    white-space: nowrap;
}

.aside_item.selected {
    font-weight: bold;
}

.aside_item a {
    color: #ffffff;
}

article {
    flex: 1;
    padding: 0 20px;
}

.article_header {
    display: flex;
    padding: 10px;
}

.column_name {
    font-size: 19px;
    color: var(--primary-color);
    font-weight: bold;
}

.path {
    color: #ADADAD;
}

@media screen and (max-width: 1080px){
    main {
        flex-direction: column;
    }

    aside {
        width: 100%;
    }

    article {
        width: 100%;
    }
}

@media screen and (max-device-width: 1080px){
    .column_name {
        font-size: 38px;
    }
}